<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">


    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="mainlayout.xhtml">
            <ui:define name="content">
                <h:form>
                    <style>
                        .cen{
                            margin-left: auto;
                            margin-right: auto;
                            width: 100%;
                            text-align: center;
                        }
                        .oneThirdPercent{
                            width: 33%;
                        }

                        .twoThirdPercent{
                            width: 67%;
                        }
                        .fiftyPercent{
                            width: 50%;
                            text-align: center;
                        }

                        .rightAll{
                            width: 50%;
                            text-align: right;
                        }
                        .leftAll{
                            width: 50%;
                            text-align: left;
                        }
                        .allbig{
                            height: 99%;
                            width: 99%;
                        }

                        .weatherLabel{
                            width: 200px;
                            text-align: right;
                        }

                        .weatherSpace{
                            width: 10px;
                        }
                        .weatherSlider{
                            width: 200px;
                        }
                        .weatherValue{
                            width: 100px;
                            text-align: left;
                        }

                        .check{
                            width: 10px;
                            text-align: left;
                        }



                    </style>

                    <p:growl id="growl" sticky="true" showDetail="true"/>

                    <p:wizard flowListener="#{eventView.onFlowProcess}">
                        <p:tab id="eventData" title="Event Data">
                            <p:panel >
                                <p:messages />
                                <h:panelGrid columns="2" style="width: 100%" columnClasses="twoThirdPercent, oneThirdPercent">
                                    <h:panelGrid columns="1" style="width: 99%">
                                        <p:inputText id="eventName" value="#{eventView.event.title}" styleClass="cen" required="true"
                                                     requiredMessage="You have to provide a title!"/>
                                        <p:watermark for="eventName" value="Event Name" />

                                        <h:panelGrid columns="2" style="width: 100%" columnClasses="fiftyPercent, fiftyPercent">
                                            <h:outputText value="Start"/>
                                            <h:outputText value="End"/>


                                            <p:calendar id="startDate" binding="#{startDateComponent}" value="#{eventView.event.startDate}" pattern="dd-MM-yyyy HH:mm" mask="true" required="true" >
                                                <p:ajax update="endDate"/>
                                            </p:calendar>
                                            <p:calendar id="endDate" value="#{eventView.event.endDate}" pattern="dd-MM-yyyy HH:mm" mask="true" required="true">
                                                <f:validator validatorId="dateRangeValidator" />
                                                <f:attribute name="startDateComponent" value="#{startDateComponent}" />
                                            </p:calendar>


                                            <h:panelGrid columns="2" style="width: 100%" columnClasses="rightAll, leftAll">
                                                <h:selectBooleanCheckbox id="allDay" value="#{eventView.event.allDay}" title="All Day"/>
                                                <h:outputLabel value="All Day" for="allDay" />
                                            </h:panelGrid>
                                            <h:panelGrid columns="2" style="width: 100%" columnClasses="rightAll, leftAll">
                                                <h:selectBooleanCheckbox id="public" value="#{eventView.event.isPublic}" title="Public"/>
                                                <h:outputLabel value="Public" for="public" />
                                            </h:panelGrid>

                                        </h:panelGrid>

                                        <p:inputText id="eventPlace" value="#{eventView.event.place}" styleClass="cen" required="true" requiredMessage="You have to provide a place for the event!"/>
                                        <p:watermark for="eventPlace" value="Event Place" />
                                    </h:panelGrid>

                                    <h:inputTextarea id="description" value="#{eventView.event.description}" styleClass="allbig" required="false" label="Event's description"/>
                                    <p:watermark for="description" value="Description of the Event" />

                                </h:panelGrid>
                            </p:panel>

                        </p:tab>


                        <p:tab id="weatherSettings" title="Weather Settings">
                            <p:panel >
                                <p:messages />
                                <h:panelGrid columns="1" style="width: 100%">
                                    <h:panelGroup>
                                        <h:panelGrid columns="2" >
                                            <p:outputLabel for="typeEvent" value="Type of Event:" />
                                            <p:selectOneRadio id="typeEvent" value="#{eventView.event.isOutdoor}" required="true"  >
                                                <f:selectItem itemLabel="Indoor" itemValue="false" />
                                                <f:selectItem itemLabel="Outdoor" itemValue="true" />
                                                <p:ajax update="weatherSpecs"/>
                                            </p:selectOneRadio>
                                        </h:panelGrid>
                                    </h:panelGroup>

                                    <h:panelGroup>
                                        <h:panelGrid columns="2" >
                                            <p:outputLabel for="weatherSpecs" value="Bad weather specifications:" />
                                            <p:selectOneRadio id="weatherSpecs" value="#{eventView.event.weatherSpescs}" disabled="#{!eventView.visibleWeather}" required="true">
                                                <f:selectItem itemLabel="Off" itemValue="off" />
                                                <f:selectItem itemLabel="Standard" itemValue="standard" />
                                                <f:selectItem itemLabel="Custom" itemValue="custom" />
                                                <p:ajax update="gridCustom"/>
                                            </p:selectOneRadio>
                                        </h:panelGrid>
                                    </h:panelGroup>

                                    <h:panelGroup>
                                        <h:panelGrid id="gridCustom">
                                            <h:panelGrid columns="3" columnClasses="check, weatherLabel, weatherSlider">
                                                <p:selectBooleanCheckbox value="#{eventView.boolPrecipitationType}" disabled="#{!eventView.visibleCustom}">
                                                    <p:ajax update="precipitationType" />
                                                </p:selectBooleanCheckbox>
                                                <p:outputLabel for="precipitationType" value="Precipitation Type" />
                                                <p:selectOneRadio id="precipitationType" value="#{eventView.precipitationTypeTemp}" disabled="#{!eventView.boolPrecipitationType}" required="true">
                                                    <f:selectItem itemLabel="Clear" itemValue="Clear" />
                                                    <f:selectItem itemLabel="Rain" itemValue="Rain" />
                                                    <f:selectItem itemLabel="Snow" itemValue="Snow" />
                                                </p:selectOneRadio>
                                            </h:panelGrid>

                                            <h:panelGrid  columns="5" columnClasses="check, weatherLabel, weatherSpace, weatherSlider, weatherValue">

                                                <p:selectBooleanCheckbox value="#{eventView.boolWindSpeed}" disabled="#{!eventView.visibleCustom}">
                                                    <p:ajax update="windSlider" />
                                                </p:selectBooleanCheckbox>

                                                <h:outputText value="Wind Speed " />
                                                <h:inputHidden id="windSpeed" value="#{eventView.event.badWeatherSpecification.weather.windSpeed}" />
                                                <p:slider id="windSlider" for="windSpeed"  display="outputWind" displayTemplate=" {value} m/s" disabled="#{!eventView.boolWindSpeed}"/>
                                                <h:outputText id="outputWind" value=" #{eventView.event.badWeatherSpecification.weather.windSpeed} m/s" />

                                                <p:selectBooleanCheckbox value="#{eventView.boolTemperature}" disabled="#{!eventView.visibleCustom}">
                                                    <p:ajax update="temperatureSlider" />
                                                </p:selectBooleanCheckbox>
                                                <h:outputText value="Temperature " />
                                                <h:inputHidden id="temperature" value="#{eventView.event.badWeatherSpecification.weather.temperature}" />
                                                <p:slider id="temperatureSlider" for="temperature"  display="outputtemperature" displayTemplate=" {value} °C" disabled="#{!eventView.boolTemperature}" minValue="-50" maxValue="50"/>
                                                <h:outputText id="outputtemperature" value=" #{eventView.event.badWeatherSpecification.weather.temperature} °C" />


                                                <p:selectBooleanCheckbox value="#{eventView.boolCloudsCoverage}" disabled="#{!eventView.visibleCustom}">
                                                    <p:ajax update="cloudSlider" />
                                                </p:selectBooleanCheckbox>
                                                <h:outputText value="Clouds Coverage " />
                                                <h:inputHidden id="cloudsCoverage" value="#{eventView.event.badWeatherSpecification.weather.cloudsCoverage}" />
                                                <p:slider id="cloudSlider" for="cloudsCoverage"  display="outputcloudsCoverage" displayTemplate=" {value} %" disabled="#{!eventView.boolCloudsCoverage}"/>
                                                <h:outputText id="outputcloudsCoverage" value=" #{eventView.event.badWeatherSpecification.weather.cloudsCoverage} %" />



                                            </h:panelGrid>
                                        </h:panelGrid>
                                    </h:panelGroup>


                                </h:panelGrid>
                            </p:panel>
                        </p:tab>

                        <p:tab id="confirm" title="Confirmation">
                            <p:panel header="Confirmation">
                                <h:panelGrid columns="2" style="width: 100%" columnClasses="fiftyPercent, fiftyPercent">

                                    <p:selectManyMenu style="width:98%" id="advanced" value="#{eventView.invitated}" var="u" filter="true" filterMatchMode="contains" showCheckbox="true">
                                        <f:selectItems value="#{eventView.invitable}" var="user" itemLabel="#{user.username}" itemValue="#{user}" />
                                        <p:column>
                                            <h:outputText value="#{u.username}" />
                                        </p:column>
                                        <p:ajax update="listInvitated"/>
                                    </p:selectManyMenu>
                                    <p:dataList id="listInvitated" value="#{eventView.invitated}" var="inv" style="width:98%">
                                        <f:facet name="header">
                                            Invitated
                                        </f:facet>
                                        #{inv.username} - #{inv.name},#{inv.surname}
                                    </p:dataList>
                                </h:panelGrid>

                                <p:separator/>
                                <h:panelGroup style="display:block; text-align:center">
                                    <p:commandButton action="#{eventView.save}" value="Save"/>
                                </h:panelGroup>
                            </p:panel>
                        </p:tab>
                    </p:wizard>

                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

